<!DOCTYPE html>
<html>
<head>
    <title>Line</title>
    <meta charset="utf-8">
    <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="../src/JChart.js"></script>
    <script type="text/javascript" src="../src/JChart.Canvas.js"></script>
    <script type="text/javascript" src="../src/JChart.Chart.js"></script>
    <script type="text/javascript" src="../src/JChart.Scale.js"></script>
    <script type="text/javascript" src="../src/JChart.Line.js"></script>
</head>
<body>
<h1 style="text-align: center">折线图</h1>

<div class="chartsContainer">
    <div>公司产品销售汇总(2012-2014)</div>
    <canvas id="line_canvas"></canvas>
</div>

<script type="text/javascript">
    var data = {
        labels : ["2012","二月","三月","四月","五月","六月","七月",'八月','九月','十月','十一月','十二月','2013',"二月","三月","四月","五月","六月","七月",'八月','九月','十月','十一月','十二月','2014','一月','二月'],
        datasets : [
            {
                name : 'A产品',
                fillColor : "rgba(220,220,220,0.5)",
                color : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointBorderColor : "#fff",
                data : [65,59,90,-81,56,55,40,20,13,20,11,60,65,59,90,81,56,55,40,20,11,20,10,60,11,60,65]
            },
            {
                name : 'B产品',
                fillColor : "rgba(151,187,205,0.5)",
                color : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointBorderColor : "#fff",
                data : [28,48,40,19,96,-27,100,40,40,70,11,89,28,48,40,19,96,27,100,40,40,70,10,89,28,48,40]
            }
        ]
    }
    var line = new JChart.Line(data,{
        id : 'line_canvas',
        height : 600,
        width : 1000,
        datasetGesture : true
    });
    line.on('tap.point',function(data,i,j){
        alert(data);
    });
    line.draw();



</script>
</body>
</html>